<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <title>新世界</title>
</head>
<body>
    <div class="box">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="left">
                <img src="./images/nav-img.png" alt="" class="nav-img">
                <p>新世界</p>
            </div>
            <div class="right">
                <a href="#" class="current">首页</a>
                <a href="#">最新活动</a>
                <a href="#">项目介绍</a>
                <a href="#">爱心社区</a>
                <a href="#">关于我们</a>     
            </div>
            <a href="#"><img src="./images/nav-login.png" alt="" class="nav-login">登录</a>
        </div>
        <!-- 照片 -->
        <div class="pic">
            <div class="pic-con">
                <p class="p1">Time of new life</p>
                <p class="p2">新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
                <p class="p3">开始体验</p>
            </div>
        </div>
        <!-- 图标图片 -->
        <div class="icon">
            <div class="icon-img">
                <div><img src="./images/icon-img1.png" alt=""></div>
                <div><img src="./images/icon-img2.png" alt=""></div>
                <div><img src="./images/icon-img3.png" alt=""></div>
                <div><img src="./images/icon-img4.png" alt=""></div>
            </div>
            <!-- 图标文字 -->
            <div class="icon-p">
                <p>打造全新世界观，让你更爱你的生活</p>
                <p>丰富多彩的公益活动，发挥新世界的主人公意识</p>
                <p>时尚的新理念，超前体验未知的生活</p>
                <p class="p1">完善的培养机制，培养你全新的世界观</p>
            </div>
        </div>
        <!-- 关于新世界你不知道的还有什么 -->
        <div class="newworld">
            <img src="./images/newworld.png" alt="">
            <p>关于新世界你不知道的还有什么?</p>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <p class="p1">查找新世界城市活动信息</p>
            <div class="line"></div>
            <p class="p2">每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
            <div class="search-con">
                <div class="select1">
                    <p>国家</p>
                </div>
                <ul class="ul1">
                    <li>中国</li>
                    <li>美国</li>
                    <li>法国</li>
                    <li>英国</li>
                    <li>意大利</li>
                </ul>
                <div class="select2">
                    <p>省份</p>
                </div>
                <ul class="ul2">
                        <li>北京市</li>
                        <li>天津市</li>
                        <li>上海市</li>
                        <li>江苏省</li>
                        <li>浙江省</li>
                </ul>
                <div class="select3">
                    <p>城市</p>
                </div>
                <ul class="ul3">
                        <li>南京</li>
                        <li>济南</li>
                        <li>西安</li>
                        <li>杭州</li>
                        <li>宿迁</li>
                </ul>
                <p>搜&nbsp;&nbsp;&nbsp;&nbsp;索</p>
            </div>
        </div>
        <!-- 活动 -->
        <div class="activity">
            <div class="activity-con">
                    <div class="img-div1"></div>
                    <div class="img-div2"></div>
                    <div class="img-div3"></div>
                    <div class="img-div4"></div>
            </div>
        </div>
        <!-- 新世界 -->
        <div class="con-div1">
            <div class="left">
                <p class="p1">新世界</p>
                <p class="p2">TIME</p>
                <p class="p3">@新世界－北京</p>
                <p class="p4">2016.04.01</p>
            </div>
            <div class="right">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <p class="title-p1">新世界</p>
                            <img src="./images/con-div1-img2.png" alt="" class="title-img">
                            <p class="title-p2">01</p>
                            <p class="p1">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
                            <p class="p2">更多详情</p>
                        </div>
                        <div class="swiper-slide">
                                <p class="title-p1">新世界</p>
                                <img src="./images/con-div1-img2.png" alt="" class="title-img">
                                <p class="title-p2">02</p>
                                <p class="p1">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p class="p2">更多详情</p>
                        </div>
                        <div class="swiper-slide">
                                <p class="title-p1">新世界</p>
                                <img src="./images/con-div1-img2.png" alt="" class="title-img">
                                <p class="title-p2">03</p>
                                <p class="p1">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p class="p2">更多详情</p>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
              </div>
            </div>
            
        </div>
        <!-- 新时代 -->
        <div class="con-div2">
            <div class="left">
                <p>新时代</p>
                <p>关于爱生活的我们</p>
                <div class="div1"></div>
                <div class="div2">查看更多</div>
            </div>
            <div class="center">
                    <p>新时代</p>
                    <p>关于爱生活的我们</p>
                    <div class="div1"></div>
                    <div class="div2">查看更多</div>
            </div>
            <div class="right"></div>
        </div>
         <!-- 成为我们的志愿者 -->
         <div class="volunteer">
            <p class="p1">成为我们的志愿者</p>
            <div class="line"></div>
            <p class="p2">新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情那就不要犹豫，快来加入我们，成为改变所有人生活的人 </p>
            <div class="volunteer-con">
                <div class="left">
                    <p class="p1 first">新世界志愿者协议</p>
                    <p class="p2 second">加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则 ......</p>
                    <a href="javascript:;"><img src="./images/volunteer-img.png" alt="">more</a>
                    <p class="p1 third">新世界志愿者权利</p>
                    <p class="p2 four">新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在四新世界活动的优先参与资格</p>
                    <a href="javascript:;"><img src="./images/volunteer-img.png" alt="">more</a>
                    <p class="p1 five">更多条款</p>
                    <a href="javascript:;"><img src="./images/volunteer-img.png" alt="">more</a>
                </div>
                <div class="right">
                    <div class="name">姓名：<input type="text"></div>
                    <div class="age">年龄：<input type="text"></div>
                    <div class="phone">联系方式：<input type="text"></div>
                    <div class="adress">联系地址：<input type="text"></div>
                    <div class="detail">
                        请简单描述您梦想的生活：
                        <input type="text">
                    </div>
                    <div class="submit">提交申请</div>
                </div>
            </div>
            
        </div>
        <!-- 联系我们 -->
        <div class="contact">
            <p class="p1">联系我们</p>
            <p class="p2">为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯也可以通过以下任何方式关注我们动态</p>
            <div class="submit-button">
                <input type="text" placeholder="someone@email.com">
                <a href="#">提交</a>
            </div>
            <div class="img">
                <a href="#"><img src="./images/contact-img1.png" alt="" class="first"></a>
                <a href="#"><img src="./images/contact-img2.png" alt="" class="second"></a>
                <a href="#"><img src="./images/contact-img3.png" alt="" class="third"></a>
                <a href="#"><img src="./images/contact-img4.png" alt="" class="four"></a>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <p>@2016新世界</p>
            <a href="#">Back to top</a>
        </div>
    </div>
    <script src="./js/swiper.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
             // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            clickable: true,
            },
        });
        $(".search-con>div").click(function(){
            if($(this).index() == 0){
                $(".search-con>.ul1").css("display","block");
                $(".search-con>.ul1 li").click(function(){
                    $(".search-con>.ul1").css("display","none");
                    $(".search-con>.select1>p").text($(this).text());
                });
            }else if($(this).index() == 2){
                $(".search-con>.ul2").css("display","block");
                $(".search-con>.ul2 li").click(function(){
                    $(".search-con>.ul2").css("display","none");
                    $(".search-con>.select2>p").text($(this).text());
                });
            }else{
                $(".search-con>.ul3").css("display","block");
                $(".search-con>.ul3 li").click(function(){
                    $(".search-con>.ul3").css("display","none");
                    $(".search-con>.select3>p").text($(this).text());
                });
            }
        });
    </script>
</body>
</html>